<script setup>
import { ref, h, onMounted, onBeforeMount } from 'vue'
import { RouterLink, useRouter } from 'vue-router';
import route from "@/router";
import request from "@/utils/request";
import { useUserStore } from '@/stores/modules/user';
import { ElMessage } from 'element-plus';
import { Document, Warning, ArrowRight, DocumentAdd, ChatLineRound, Share } from '@element-plus/icons-vue';

//课程
const router = useRouter();
const userStore = useUserStore();

// 学习进度数据
const learningProgress = ref(25); // 默认值
const attendanceRate = ref('90%');
const interactionRate = ref('40%');
const focusRate = ref('60%');

// 选中的课程ID和课程列表
const value = ref('');
const course_name = ref([]);
// 添加调试显示开关
/* 注释掉测试相关代码
const showDebugInfo = ref(true);
// 使用本地数据的标志
const usingLocalData = ref(false);
*/

const getStuId = () => {
  try {
    const rawInfo = localStorage.getItem('studentUserInfo')
    if (!rawInfo) {
      console.error('无登录信息')
      ElMessage.warning('请先登录')
      router.push('/student/login')
      return null
    }

    const userInfo = JSON.parse(rawInfo)
    if (!userInfo?.stu_id) {
      localStorage.removeItem('studentUserInfo')
      console.error('登录信息无效')
      ElMessage.warning('登录信息无效，请重新登录')
      router.push('/student/login')
      return null
    }
    return userInfo.stu_id
  } catch (e) {
    console.error('学生ID获取失败:', e)
    ElMessage.error('登录信息解析失败')
    router.push('/student/login')
    return null
  }
}

defineExpose({
  getStuId
})

// 获取已选课程列表
const fetchSelectedCourses = async () => {
    try {
        console.log('==== 开始获取已选课程列表 ====');

        // 从localStorage获取完整的学生信息
        const studentInfoRaw = localStorage.getItem('studentUserInfo');
        console.log('localStorage中的学生信息:', studentInfoRaw);

        // 检查学生信息是否存在，不存在则手动创建测试用户
        let studentInfo;
        if (!studentInfoRaw) {
            console.log('未找到学生信息，请先登录');
            router.push('/student/login');
            return false;
        } else {
            // 解析现有用户信息
            try {
                studentInfo = JSON.parse(studentInfoRaw);
                console.log('解析后的学生信息:', studentInfo);
            } catch (parseError) {
                console.error('解析学生信息失败:', parseError);
                router.push('/student/login');
                return false;
            }
        }

        // 获取学生ID
        const userId = getStuId();
        if (!userId) {
            console.error('无法获取有效的学生ID，请先登录');
            router.push('/student/login');
            return false;
        }

        console.log(`使用学生ID: ${userId} 获取已选课程`);

        try {
            // 尝试从API获取课程数据
            console.log('发送课程选择请求...');
            const response = await request.get('/api/student/course-selection/', {
                params: {
                    stu_id: userId,
                    username: studentInfo.username,
                    debug: true,
                    use_sql: true
                },
                timeout: 8000 // 增加超时时间
            });

            console.log('课程选择API返回状态:', response.status);
            console.log('课程选择API完整响应:', response);

            // 提取课程ID列表，确保是数字类型
            const selectedCourseIds = Array.isArray(response.data)
                ? response.data.map(id => Number(id))
                : [];
            console.log('已选课程IDs:', selectedCourseIds);

            if (selectedCourseIds.length > 0) {
                // 有选课数据，继续获取课程详情
                try {
                    // 获取课程详细信息
                    console.log('获取所有课程信息...');
                    const courseResponse = await request.get('/api/student/course/');
                    console.log('所有课程API响应:', courseResponse);

                    // 检查是否成功获取课程数据
                    let allCourses = [];

                    if (Array.isArray(courseResponse.data)) {
                        allCourses = courseResponse.data;
                    } else if (courseResponse.data && Array.isArray(courseResponse.data.data)) {
                        allCourses = courseResponse.data.data;
                    } else if (courseResponse.data && typeof courseResponse.data === 'object') {
                        // 尝试提取对象中的数组
                        const possibleArrays = Object.values(courseResponse.data)
                            .filter(val => Array.isArray(val));
                        if (possibleArrays.length > 0) {
                            // 使用第一个找到的数组
                            allCourses = possibleArrays[0];
                        }
                    }

                    console.log('处理后的所有课程数据:', allCourses);

                    if (allCourses.length > 0) {
                        // 过滤出已选择的课程
                        const selectedCourses = allCourses.filter(course => {
                            // 确保ID比较为数字类型
                            const courseId = Number(course.id);
                            return selectedCourseIds.includes(courseId);
                        }).map(course => ({
                            value: Number(course.id),
                            label: course.name || course.title || `课程${course.id}`
                        }));

                        console.log('过滤后的已选课程:', selectedCourses);

                        if (selectedCourses.length > 0) {
                            course_name.value = selectedCourses;
                            value.value = selectedCourses[0].value;
                            console.log(`默认选中课程ID: ${value.value}`);
                            return true; // 成功获取并设置了课程
                        } else {
                            console.error('过滤后无有效课程，请检查ID匹配问题');
                        }
                    } else {
                        console.error('无有效课程数据');
                    }
                } catch (courseError) {
                    console.error('获取课程详情失败:', courseError);
                    ElMessage.error('获取课程详情失败，使用默认数据');
                }
            } else {
                console.warn('API未返回有效选课数据');
            }

            // 如果API没有返回有效数据或处理过程中出错，使用测试数据
            console.log('使用默认课程数据');
            setDefaultCourses();
            return false; // 表示使用了默认值
        } catch (apiError) {
            console.error('API请求失败:', apiError);
            console.error('错误详情:', apiError.response ? apiError.response.data : '无响应数据');
            ElMessage.error('获取课程数据失败，使用默认数据');

            // API请求失败，使用测试数据
            setDefaultCourses();
            return false;
        }
    } catch (error) {
        console.error('获取已选课程过程中出现错误:', error);
        ElMessage.error('数据加载失败，使用默认数据');
        setDefaultCourses();
        return false;
    }
};

// 设置默认课程数据
const setDefaultCourses = () => {
    console.log('设置默认课程数据');
    course_name.value = [
        { value: 1, label: '数据结构' },
        { value: 3, label: '计算机网络' },
        { value: 5, label: '软件工程' }
    ];
    value.value = 1; // 默认选中第一门课程
    console.log('已设置默认课程ID:', value.value);
};

// 获取课程的学习数据
const fetchCourseData = async (courseId) => {
    try {
        console.log(`正在获取课程ID ${courseId} 的学习数据...`);

        // 从localStorage获取完整的学生信息
        const studentInfoRaw = localStorage.getItem('studentUserInfo');
        if (!studentInfoRaw) {
            console.log('未找到学生信息，使用默认数据');
            // 明确传入课程ID确保正确使用测试数据
            useDefaultData(courseId);
            return;
        }

        // 解析学生信息
        let studentInfo;
        try {
            studentInfo = JSON.parse(studentInfoRaw);
            console.log('学生完整信息:', studentInfo);
        } catch (parseError) {
            console.error('解析学生信息失败:', parseError);
            useDefaultData(courseId);
            return;
        }

        // 获取学生ID
        const userId = getStuId();
        if (!userId) {
            console.error('无法获取有效的学生ID，使用默认数据');
            useDefaultData(courseId);
            return;
        }

        console.log(`使用学生ID: ${userId} 和课程ID: ${courseId} 获取学习数据`);

        // 创建包装函数，确保每个API调用即使失败也不会影响其他调用
        const safeApiCall = async (fn, defaultFn) => {
            try {
                const result = await fn();
                if (result === false) {
                    // API调用失败或返回无效数据
                    if (defaultFn) defaultFn();
                }
                return result;
            } catch (error) {
                console.error('API调用失败:', error);
                if (defaultFn) defaultFn();
                return null;
            }
        };

        // 并行获取所有数据，但确保使用当前课程ID
        await Promise.all([
            // 获取进度数据
            safeApiCall(
                async () => {
        try {
            // 尝试获取学习进度数据
            const progressResponse = await request.get(`/api/student/course/progress/`, {
                params: {
                    stu_id: userId,
                    username: studentInfo.username,
                    course_id: courseId,
                    use_sql: true,   // 使用SQL查询
                    detailed: true   // 获取详细信息
                },
                timeout: 8000 // 增加超时时间
            });

            console.log('进度数据响应:', progressResponse);

            // 更新进度数据 - 适应不同的数据格式
            let progressData = null;

            if (progressResponse && progressResponse.data) {
                // 直接包含进度字段
                if (typeof progressResponse.data.progress !== 'undefined' ||
                    typeof progressResponse.data.attendance_rate !== 'undefined') {
                    progressData = progressResponse.data;
                }
                // 数据在data子字段中
                else if (progressResponse.data.data) {
                    progressData = progressResponse.data.data;
                }
                // 是数组格式
                else if (Array.isArray(progressResponse.data) && progressResponse.data.length > 0) {
                    progressData = progressResponse.data[0];
                }
            }

            // 如果找到有效的进度数据
            if (progressData) {
                console.log('设置进度数据:', progressData);

                // 进度，默认25%
                learningProgress.value = progressData.progress ?? progressData.learning_progress ?? 25;

                // 出勤率
                attendanceRate.value = progressData.attendance_rate ?? progressData.attendance ?? '90%';

                // 互动率
                interactionRate.value = progressData.interaction_rate ?? progressData.interaction ?? '40%';

                // 专注度
                focusRate.value = progressData.focus_rate ?? progressData.focus ?? '60%';

        // 确保数值类型正确显示为百分比
        if (typeof attendanceRate.value === 'number') {
            attendanceRate.value = `${attendanceRate.value}%`;
        }
        if (typeof interactionRate.value === 'number') {
            interactionRate.value = `${interactionRate.value}%`;
        }
        if (typeof focusRate.value === 'number') {
            focusRate.value = `${focusRate.value}%`;
        }

                            return true;
                        } else {
                            console.log('未找到有效的进度数据，将使用默认数据');
                            return false;
                        }
                    } catch (progressError) {
                        console.error('获取进度数据失败:', progressError);
                        return false;
                    }
                },
                // 默认数据函数确保使用正确的课程ID
                () => {
                    // 根据课程ID设置不同的学习进度数据
                    const courseIdNum = Number(courseId);
                    switch (courseIdNum) {
                        case 1: // 数据结构
                            learningProgress.value = 75;
                            attendanceRate.value = '95%';
                            interactionRate.value = '85%';
                            focusRate.value = '80%';
                            break;
                        case 2: // 操作系统
                            learningProgress.value = 60;
                            attendanceRate.value = '88%';
                            interactionRate.value = '70%';
                            focusRate.value = '75%';
                            break;
                        case 3: // 计算机网络
                            learningProgress.value = 45;
                            attendanceRate.value = '82%';
                            interactionRate.value = '65%';
                            focusRate.value = '70%';
                            break;
                        case 4: // 数据库系统
                            learningProgress.value = 65;
                            attendanceRate.value = '92%';
                            interactionRate.value = '78%';
                            focusRate.value = '85%';
                            break;
                        case 5: // 软件工程
                            learningProgress.value = 35;
                            attendanceRate.value = '75%';
                            interactionRate.value = '60%';
                            focusRate.value = '65%';
                            break;
                        case 6: // 人工智能
                            learningProgress.value = 30;
                            attendanceRate.value = '70%';
                            interactionRate.value = '80%';
                            focusRate.value = '75%';
                            break;
                        default: // 其他课程
                            learningProgress.value = 25 + (courseIdNum % 5) * 10;
                            attendanceRate.value = `${70 + (courseIdNum % 3) * 10}%`;
                            interactionRate.value = `${40 + (courseIdNum % 6) * 10}%`;
                            focusRate.value = `${60 + (courseIdNum % 4) * 10}%`;
                    }
                }
            ),

            // 获取笔记数据
            safeApiCall(
                () => fetchNotes(courseId, userId, studentInfo.username),
                // 默认笔记数据
                () => {
                    // 根据课程ID设置不同的笔记数据
                    const courseIdNum = Number(courseId);
                    if (courseIdNum == 1) { // 数据结构
                        note_data.value = [
                            { note_title: '线性表的定义与实现' },
                            { note_title: '栈和队列操作' },
                            { note_title: '树的遍历算法' },
                            { note_title: '图的最短路径' },
                            { note_title: '排序算法比较' }
                        ];
                    } else if (courseIdNum == 2) { // 操作系统
                        note_data.value = [
                            { note_title: '进程管理与调度' },
                            { note_title: '内存分配策略' },
                            { note_title: '文件系统结构' },
                            { note_title: '死锁处理方法' }
                        ];
                    } else if (courseIdNum == 3) { // 计算机网络
                        note_data.value = [
                            { note_title: 'TCP/IP协议族' },
                            { note_title: '网络层路由算法' },
                            { note_title: 'HTTP请求响应模型' },
                            { note_title: '网络安全基础' },
                            { note_title: 'Socket编程' }
                        ];
                    } else if (courseIdNum == 4) { // 数据库系统
                        note_data.value = [
                            { note_title: 'SQL语言基础' },
                            { note_title: '关系模型与范式' },
                            { note_title: '索引优化技术' },
                            { note_title: '事务管理ACID' }
                        ];
                    } else if (courseIdNum == 5) { // 软件工程
                        note_data.value = [
                            { note_title: '需求分析方法' },
                            { note_title: '软件架构设计' },
                            { note_title: '敏捷开发流程' },
                            { note_title: '软件测试策略' },
                            { note_title: '项目管理要点' }
                        ];
                    } else if (courseIdNum == 6) { // 人工智能
                        note_data.value = [
                            { note_title: '机器学习基础算法' },
                            { note_title: '神经网络结构' },
                            { note_title: '深度学习框架比较' },
                            { note_title: '自然语言处理技术' }
                        ];
                    } else {
                        // 生成通用笔记
                        note_data.value = [
                            { note_title: `课程${courseIdNum}核心概念` },
                            { note_title: `重要公式总结` },
                            { note_title: `课程${courseIdNum}难点解析` },
                            { note_title: `复习要点` }
                        ];
                    }
                }
            ),

            // 获取错题集
            safeApiCall(
                () => fetchWrongQuestions(courseId, userId, studentInfo.username),
                // 默认错题数据
                () => {
                    const courseIdNum = Number(courseId);
                    // 根据课程ID设置不同的错题集数据
                    if (courseIdNum == 1) { // 数据结构
                        wrong_data.value = [
                            { wrong_title: '二叉树深度计算' },
                            { wrong_title: '快速排序分析' },
                            { wrong_title: '图的邻接表表示' }
                        ];
                    } else if (courseIdNum == 2) { // 操作系统
                        wrong_data.value = [
                            { wrong_title: '调度算法比较题' },
                            { wrong_title: '死锁检测习题' },
                            { wrong_title: '页面置换算法' }
                        ];
                    } else if (courseIdNum == 3) { // 计算机网络
                        wrong_data.value = [
                            { wrong_title: 'TCP滑动窗口计算' },
                            { wrong_title: 'IP地址子网划分' },
                            { wrong_title: '路由选择算法题' }
                        ];
                    } else if (courseIdNum == 4) { // 数据库系统
                        wrong_data.value = [
                            { wrong_title: '复杂SQL查询' },
                            { wrong_title: '事务隔离级别问题' },
                            { wrong_title: '数据库设计习题' }
                        ];
                    } else if (courseIdNum == 5) { // 软件工程
                        wrong_data.value = [
                            { wrong_title: '需求分析文档错误' },
                            { wrong_title: '软件测试用例设计' },
                            { wrong_title: '项目风险评估问题' }
                        ];
                    } else if (courseIdNum == 6) { // 人工智能
                        wrong_data.value = [
                            { wrong_title: '神经网络结构设计' },
                            { wrong_title: '梯度下降算法计算' },
                            { wrong_title: '决策树构建习题' }
                        ];
                    } else {
                        // 生成通用错题
                        wrong_data.value = [
                            { wrong_title: `课程${courseIdNum}习题1.2` },
                            { wrong_title: `课程${courseIdNum}习题2.3` },
                            { wrong_title: `复习题${courseIdNum}.4` }
                        ];
                    }
                }
            ),

            // 获取课程标签
            safeApiCall(
                async () => {
                    // 重新实现获取标签的逻辑，确保正确使用课程ID
                    if (!courseId) {
                        console.error('没有课程ID，无法获取标签');
                        return false;
                    }

                    try {
                        const response = await request.get(`/api/student/course/tabs/`, {
                            params: {
                                course_id: courseId,
                                stu_id: userId,
                                use_sql: true,
                                detailed: true
                            },
                            timeout: 5000
                        });

                        console.log('课程标签响应:', response);

                        // 清空之前的标签和内容
                        tabs.value = [];
                        tab_content.value = {};

                        // 适应不同的响应格式
                        let tabData = [];
                        if (response.data) {
                            if (Array.isArray(response.data)) {
                                tabData = response.data;
                            } else if (typeof response.data === 'object') {
                                if (Array.isArray(response.data.data)) {
                                    tabData = response.data.data;
                                } else if (Array.isArray(response.data.items)) {
                                    tabData = response.data.items;
                                } else if (response.data.tabs && Array.isArray(response.data.tabs)) {
                                    tabData = response.data.tabs;
                                }
                            }
                        }

                        if (tabData.length > 0) {
                            tabs.value = tabData.map((tab, index) => {
                                return {
                                    name: tab.name || `tab${index + 1}`,
                                    label: tab.label || tab.title || `第${index + 1}章`
                                };
                            });

                            console.log('设置课程标签:', tabs.value);

                            if (tabs.value.length > 0) {
                                active_tab.value = tabs.value[0].name;
                                await fetchTabContent(tabs.value[0].name, courseId, userId);
                            }
                            return true;
                        }

                        return false;
                    } catch (error) {
                        console.error('获取标签失败:', error);
                        return false;
                    }
                },
                // 默认标签和内容
                () => {
                    // 设置默认标签和内容
                    const courseIdNum = Number(courseId);
                    tabs.value = generateTabsForCourse(courseIdNum);
                    active_tab.value = tabs.value[0].name;
                    tab_content.value = generateTabContentForCourse(courseIdNum);
                }
            )
        ]);

        console.log(`课程ID: ${courseId} 的所有数据已加载完成`);
        ElMessage.success(`课程 "${allCourses.value.find(c => c.id === Number(courseId))?.name || `课程${courseId}`}" 数据加载成功`);

    } catch (error) {
        console.error('获取课程学习数据失败:', error);
        // 确保使用正确的课程ID加载默认数据
        useDefaultData(courseId);
    }
};

// 获取标签内容 - 修改以确保使用正确的课程ID
const fetchTabContent = async (tabName, courseId, studentId) => {
    // 使用参数中传入的课程ID和学生ID，而不是从value中获取
    const currentCourseId = courseId || value.value;
    const currentStudentId = studentId || getStuId();

    if (!currentCourseId) {
        console.error(`获取标签 ${tabName} 内容失败: 没有课程ID`);
        setDefaultTabContent(tabName, currentCourseId);
        return;
    }

    if (!currentStudentId) {
        console.error(`获取标签 ${tabName} 内容失败: 无法获取学生ID`);
        setDefaultTabContent(tabName, currentCourseId);
        return;
    }

    // 检查是否已经有内容，避免重复请求
    if (tab_content.value[tabName]) {
        console.log(`已经存在标签 ${tabName} 的内容，跳过请求`);
        return;
    }

    // 先显示加载状态
    console.log(`获取课程 ${currentCourseId} 标签 ${tabName} 的内容，学生ID: ${currentStudentId}`);
    tab_content.value[tabName] = '加载中...';

    try {
        // 发送API请求
        const response = await request.get(`/api/student/course/tab-content/`, {
            params: {
                tab_name: tabName,
                course_id: currentCourseId,
                stu_id: currentStudentId,
                use_sql: true,
                detailed: true
            },
            timeout: 8000
        });

        console.log(`标签 ${tabName} 内容响应:`, response);

        // 处理各种可能的响应格式
        let contentData = null;

        if (response.data) {
            if (response.data.content) {
                contentData = response.data.content;
            } else if (response.data.data && response.data.data.content) {
                contentData = response.data.data.content;
            } else if (Array.isArray(response.data) && response.data.length > 0) {
                const firstItem = response.data[0];
                contentData = firstItem.content || firstItem.text || JSON.stringify(firstItem);
            } else if (typeof response.data === 'string') {
                contentData = response.data;
            } else if (typeof response.data === 'object' && response.data !== null) {
                contentData = JSON.stringify(response.data, null, 2);
            }
        }

        // 检查是否有有效内容
        if (contentData) {
            console.log(`设置标签 ${tabName} 内容:`, contentData.substring(0, 100) + '...');
            tab_content.value[tabName] = contentData;
        } else {
            console.log(`API返回的标签内容无效，使用默认内容:`, response?.data);
            setDefaultTabContent(tabName, currentCourseId);
        }
    } catch (error) {
        console.error(`获取标签 ${tabName} 内容失败:`, error);
        setDefaultTabContent(tabName, currentCourseId);
    }
};

// 设置默认标签内容 - 修改接收课程ID参数
const setDefaultTabContent = (tabName, courseId) => {
    // 优先使用传入的课程ID，否则使用当前选中的课程ID
    const currentCourseId = courseId || value.value;
    const courseIdNum = Number(currentCourseId);

    // 获取课程对应的标签内容
    const content = generateTabContentForCourse(courseIdNum);

    // 设置对应标签的内容
    if (content[tabName]) {
        tab_content.value[tabName] = content[tabName];
    } else {
        // 如果没有找到对应标签的内容，使用通用内容
        if (tabName === 'first' || tabName === 'intro') {
            tab_content.value[tabName] = `课程${courseIdNum}简介\n\n本课程是计算机专业的核心课程之一。`;
        } else {
            tab_content.value[tabName] = `${tabName} 的内容将在这里显示，包括章节概要和学习目标`;
        }
    }
};

// 切换标签 - 确保传递当前课程ID
const handleTabClick = (tab) => {
    console.log(`切换到标签: ${tab.props.name}`);
    // 确保使用当前选中的课程ID
    fetchTabContent(tab.props.name, value.value);
};

// 使用默认测试数据的辅助函数
const useDefaultData = (courseId = null) => {
    // 如果没有传入课程ID，使用当前选中的课程ID
    const currentCourseId = courseId || value.value || 1;
    console.log(`使用课程ID ${currentCourseId} 的默认测试数据`);

    // 根据课程ID设置不同的学习进度数据
    switch (Number(currentCourseId)) {
        case 1: // 数据结构
            learningProgress.value = 75;
            attendanceRate.value = '95%';
            interactionRate.value = '85%';
            focusRate.value = '80%';
            break;
        case 2: // 操作系统
            learningProgress.value = 60;
            attendanceRate.value = '88%';
            interactionRate.value = '70%';
            focusRate.value = '75%';
            break;
        case 3: // 计算机网络
            learningProgress.value = 45;
            attendanceRate.value = '82%';
            interactionRate.value = '65%';
            focusRate.value = '70%';
            break;
        case 4: // 数据库系统
            learningProgress.value = 65;
            attendanceRate.value = '92%';
            interactionRate.value = '78%';
            focusRate.value = '85%';
            break;
        case 5: // 软件工程
            learningProgress.value = 35;
            attendanceRate.value = '75%';
            interactionRate.value = '60%';
            focusRate.value = '65%';
            break;
        case 6: // 人工智能
            learningProgress.value = 30;
            attendanceRate.value = '70%';
            interactionRate.value = '80%';
            focusRate.value = '75%';
            break;
        default: // 其他课程
            learningProgress.value = 25 + (currentCourseId % 5) * 10; // 25-65之间随机变化
            attendanceRate.value = `${70 + (currentCourseId % 3) * 10}%`; // 70-90之间随机变化
            interactionRate.value = `${40 + (currentCourseId % 6) * 10}%`; // 40-90之间随机变化
            focusRate.value = `${60 + (currentCourseId % 4) * 10}%`; // 60-90之间随机变化
    }

    // 根据课程ID设置不同的笔记数据
    if (currentCourseId == 1) { // 数据结构
    note_data.value = [
            { note_title: '线性表的定义与实现' },
            { note_title: '栈和队列操作' },
            { note_title: '树的遍历算法' },
            { note_title: '图的最短路径' },
            { note_title: '排序算法比较' }
        ];
    } else if (currentCourseId == 2) { // 操作系统
        note_data.value = [
            { note_title: '进程管理与调度' },
            { note_title: '内存分配策略' },
            { note_title: '文件系统结构' },
            { note_title: '死锁处理方法' }
        ];
    } else if (currentCourseId == 3) { // 计算机网络
        note_data.value = [
            { note_title: 'TCP/IP协议族' },
            { note_title: '网络层路由算法' },
            { note_title: 'HTTP请求响应模型' },
            { note_title: '网络安全基础' },
            { note_title: 'Socket编程' }
        ];
    } else if (currentCourseId == 4) { // 数据库系统
        note_data.value = [
            { note_title: 'SQL语言基础' },
            { note_title: '关系模型与范式' },
            { note_title: '索引优化技术' },
            { note_title: '事务管理ACID' }
        ];
    } else if (currentCourseId == 5) { // 软件工程
        note_data.value = [
            { note_title: '需求分析方法' },
            { note_title: '软件架构设计' },
            { note_title: '敏捷开发流程' },
            { note_title: '软件测试策略' },
            { note_title: '项目管理要点' }
        ];
    } else if (currentCourseId == 6) { // 人工智能
        note_data.value = [
            { note_title: '机器学习基础算法' },
            { note_title: '神经网络结构' },
            { note_title: '深度学习框架比较' },
            { note_title: '自然语言处理技术' }
        ];
    } else {
        // 生成通用笔记
        note_data.value = [
            { note_title: `课程${currentCourseId}核心概念` },
            { note_title: `重要公式总结` },
            { note_title: `课程${currentCourseId}难点解析` },
            { note_title: `复习要点` }
        ];
    }

    // 根据课程ID设置不同的错题集数据
    if (currentCourseId == 1) { // 数据结构
    wrong_data.value = [
            { wrong_title: '二叉树深度计算' },
            { wrong_title: '快速排序分析' },
            { wrong_title: '图的邻接表表示' }
        ];
    } else if (currentCourseId == 2) { // 操作系统
        wrong_data.value = [
            { wrong_title: '调度算法比较题' },
            { wrong_title: '死锁检测习题' },
            { wrong_title: '页面置换算法' }
        ];
    } else if (currentCourseId == 3) { // 计算机网络
        wrong_data.value = [
            { wrong_title: 'TCP滑动窗口计算' },
            { wrong_title: 'IP地址子网划分' },
            { wrong_title: '路由选择算法题' }
        ];
    } else if (currentCourseId == 4) { // 数据库系统
        wrong_data.value = [
            { wrong_title: '复杂SQL查询' },
            { wrong_title: '事务隔离级别问题' },
            { wrong_title: '数据库设计习题' }
        ];
    } else if (currentCourseId == 5) { // 软件工程
        wrong_data.value = [
            { wrong_title: '需求分析文档错误' },
            { wrong_title: '软件测试用例设计' },
            { wrong_title: '项目风险评估问题' }
        ];
    } else if (currentCourseId == 6) { // 人工智能
        wrong_data.value = [
            { wrong_title: '神经网络结构设计' },
            { wrong_title: '梯度下降算法计算' },
            { wrong_title: '决策树构建习题' }
        ];
    } else {
        // 生成通用错题
        wrong_data.value = [
            { wrong_title: `课程${currentCourseId}习题1.2` },
            { wrong_title: `课程${currentCourseId}习题2.3` },
            { wrong_title: `复习题${currentCourseId}.4` }
        ];
    }

    // 设置默认标签和内容
    tabs.value = generateTabsForCourse(currentCourseId);
    active_tab.value = tabs.value[0].name;
    tab_content.value = generateTabContentForCourse(currentCourseId);
};

// 根据课程ID生成对应的标签
const generateTabsForCourse = (courseId) => {
    const courseIdNum = Number(courseId);

    // 根据课程ID生成不同的标签
    switch (courseIdNum) {
        case 1: // 数据结构
            return [
                { name: 'intro', label: '课程介绍' },
                { name: 'linear', label: '线性结构' },
                { name: 'tree', label: '树与二叉树' },
                { name: 'graph', label: '图论' },
                { name: 'search', label: '查找与排序' }
            ];
        case 2: // 操作系统
            return [
                { name: 'intro', label: '课程介绍' },
                { name: 'process', label: '进程管理' },
                { name: 'memory', label: '内存管理' },
                { name: 'file', label: '文件系统' },
                { name: 'io', label: 'I/O管理' }
            ];
        case 3: // 计算机网络
            return [
                { name: 'intro', label: '课程介绍' },
                { name: 'physics', label: '物理层' },
                { name: 'link', label: '数据链路层' },
                { name: 'network', label: '网络层' },
                { name: 'transport', label: '传输层' },
                { name: 'application', label: '应用层' }
            ];
        case 4: // 数据库系统
            return [
                { name: 'intro', label: '课程介绍' },
                { name: 'model', label: '数据模型' },
                { name: 'sql', label: 'SQL语言' },
                { name: 'design', label: '数据库设计' },
                { name: 'transaction', label: '事务处理' }
            ];
        case 5: // 软件工程
            return [
                { name: 'intro', label: '课程介绍' },
                { name: 'requirement', label: '需求分析' },
                { name: 'design', label: '软件设计' },
                { name: 'testing', label: '软件测试' },
                { name: 'maintenance', label: '软件维护' }
            ];
        case 6: // 人工智能
            return [
                { name: 'intro', label: '课程介绍' },
                { name: 'ml', label: '机器学习' },
                { name: 'dl', label: '深度学习' },
                { name: 'nlp', label: '自然语言处理' },
                { name: 'cv', label: '计算机视觉' }
            ];
        default:
            // 通用标签
            return [
                { name: 'first', label: '课程简介' },
        { name: 'second', label: '第一章' },
        { name: 'third', label: '第二章' },
        { name: 'fourth', label: '第三章' }
    ];
    }
};

// 根据课程ID生成对应的标签内容
const generateTabContentForCourse = (courseId) => {
    const courseIdNum = Number(courseId);
    const content = {};

    switch (courseIdNum) {
        case 1: // 数据结构
            content.intro = `数据结构课程介绍\n\n本课程讲授计算机存储、组织数据的方式，是计算机科学的基础课程。\n\n课程内容包括：线性表、栈、队列、树、图等基本数据结构以及常见的算法。`;
            content.linear = `线性结构\n\n包括数组、链表、栈、队列等线性数据结构的定义、特点和实现方法。\n\n重点掌握：\n- 单链表和双链表的实现\n- 栈的应用（括号匹配、表达式求值）\n- 队列的操作和实现`;
            content.tree = `树与二叉树\n\n研究树型结构的特点、存储和操作，重点是二叉树的性质和应用。\n\n需要掌握：\n- 二叉树的遍历算法（前序、中序、后序）\n- 二叉搜索树的操作\n- 平衡树的基本概念`;
            content.graph = `图论\n\n学习图的定义、存储结构、遍历算法和应用。\n\n重点：\n- 图的存储结构（邻接矩阵、邻接表）\n- 图的遍历（DFS、BFS）\n- 最短路径算法（Dijkstra算法）`;
            content.search = `查找与排序\n\n研究各种查找和排序算法的原理和实现。\n\n需要掌握：\n- 各种排序算法（插入排序、选择排序、快速排序等）\n- 各种查找算法（二分查找、哈希查找等）\n- 排序算法的时间复杂度分析`;
            break;
        case 2: // 操作系统
            content.intro = `操作系统课程介绍\n\n本课程研究计算机系统中的系统软件，它是硬件和用户之间的接口。\n\n课程主要内容包括进程管理、内存管理、文件系统和I/O管理等。`;
            content.process = `进程管理\n\n学习操作系统如何管理和调度进程。\n\n重点内容：\n- 进程的概念和状态转换\n- 进程调度算法\n- 进程间通信机制\n- 死锁的处理方法`;
            content.memory = `内存管理\n\n研究操作系统如何分配和管理内存资源。\n\n核心内容：\n- 内存分配策略\n- 虚拟内存的实现\n- 页面置换算法\n- 分段和分页机制`;
            content.file = `文件系统\n\n学习操作系统如何管理持久存储设备上的文件。\n\n重点：\n- 文件的概念和属性\n- 文件系统的结构\n- 目录管理\n- 常见文件系统（FAT、NTFS、ext）的特点`;
            content.io = `I/O管理\n\n研究操作系统如何控制和管理输入/输出设备。\n\n关键内容：\n- I/O设备的分类\n- I/O控制方式\n- 设备驱动程序\n- 缓冲区管理`;
            break;
        case 3: // 计算机网络
            content.intro = `计算机网络课程介绍\n\n本课程研究计算机之间的通信原理和技术。\n\n课程基于网络分层模型（OSI七层模型和TCP/IP四层模型）讲解各层的协议和功能。`;
            content.physics = `物理层\n\n研究如何在传输介质上传输比特流。\n\n重点内容：\n- 各种传输介质的特点\n- 信号调制与编码技术\n- 多路复用技术\n- 传输率和带宽概念`;
            content.link = `数据链路层\n\n负责点对点的可靠数据传输。\n\n主要内容：\n- 差错检测与纠正\n- 介质访问控制（MAC）\n- 以太网工作原理\n- 数据链路层设备（交换机、网桥）`;
            content.network = `网络层\n\n实现端到端的数据包传递和路由选择。\n\n核心内容：\n- IP协议及地址分配\n- 路由选择算法\n- 网络层设备（路由器）的工作原理\n- IPv4与IPv6`;
            content.transport = `传输层\n\n提供端到端的可靠数据传输服务。\n\n重点内容：\n- TCP与UDP协议的特点\n- 可靠传输的实现机制\n- 流量控制与拥塞控制\n- 端口与套接字概念`;
            content.application = `应用层\n\n研究各种网络应用的协议和实现。\n\n主要内容：\n- HTTP/HTTPS协议\n- DNS系统\n- 电子邮件协议（SMTP、POP3、IMAP）\n- FTP文件传输协议`;
            break;
        case 4: // 数据库系统
            content.intro = `数据库系统课程介绍\n\n本课程讲授数据库系统的概念、设计和实现。\n\n主要内容包括数据模型、SQL语言、数据库设计和事务处理等。`;
            content.model = `数据模型\n\n研究数据的组织方式和表示方法。\n\n重点内容：\n- 层次模型、网状模型的特点\n- 关系模型的基本概念\n- ER模型及其转换\n- 数据库范式理论`;
            content.sql = `SQL语言\n\n学习结构化查询语言的基本语法和使用方法。\n\n核心内容：\n- 数据定义语言(DDL)\n- 数据操作语言(DML)\n- 数据查询语言(DQL)\n- 高级SQL特性`;
            content.design = `数据库设计\n\n研究数据库系统的设计原则和方法。\n\n关键内容：\n- 需求分析与概念设计\n- 逻辑设计与物理设计\n- 规范化与反规范化\n- 索引设计`;
            content.transaction = `事务处理\n\n学习数据库中的事务概念和并发控制。\n\n重点：\n- 事务的ACID特性\n- 并发控制技术\n- 数据库恢复机制\n- 分布式事务处理`;
            break;
        case 5: // 软件工程
            content.intro = `软件工程课程介绍\n\n本课程研究软件开发的工程化方法和技术。\n\n主要内容包括软件生命周期、软件开发模型、项目管理和软件质量保证等。`;
            content.requirement = `需求分析\n\n学习如何收集、分析和规约软件需求。\n\n重点内容：\n- 需求获取技术\n- 需求分析方法\n- 需求规约文档\n- 需求验证`;
            content.design = `软件设计\n\n研究软件系统的设计原则和方法。\n\n核心内容：\n- 软件架构设计\n- 详细设计方法\n- 设计模式\n- 面向对象设计`;
            content.testing = `软件测试\n\n学习软件测试的理论和技术。\n\n关键内容：\n- 测试策略和计划\n- 单元测试、集成测试、系统测试\n- 测试用例设计\n- 自动化测试`;
            content.maintenance = `软件维护\n\n研究软件发布后的维护和演化。\n\n重点：\n- 维护类型与活动\n- 软件再工程\n- 配置管理\n- 软件质量保证`;
            break;
        case 6: // 人工智能
            content.intro = `人工智能课程介绍\n\n本课程研究计算机模拟人类智能的原理和技术。\n\n主要内容包括机器学习、深度学习、自然语言处理和计算机视觉等。`;
            content.ml = `机器学习\n\n学习如何让计算机从数据中学习。\n\n重点内容：\n- 监督学习算法\n- 无监督学习方法\n- 强化学习\n- 模型评估与验证`;
            content.dl = `深度学习\n\n研究基于神经网络的深度学习方法。\n\n核心内容：\n- 神经网络基础\n- 卷积神经网络\n- 循环神经网络\n- 深度学习框架应用`;
            content.nlp = `自然语言处理\n\n学习计算机处理和理解人类语言的技术。\n\n关键内容：\n- 语言模型\n- 文本分类与情感分析\n- 机器翻译\n- 问答系统`;
            content.cv = `计算机视觉\n\n研究计算机分析和理解图像视频的技术。\n\n重点：\n- 图像处理基础\n- 目标检测与识别\n- 图像分割\n- 视频分析`;
            break;
        default:
            // 通用内容
            content.first = `课程${courseIdNum}简介\n\n本课程是计算机专业的核心课程之一。\n\n通过本课程的学习，您将掌握该领域的基础理论和实践技能。`;
            content.second = `第一章内容\n\n本章节介绍课程的基础概念和原理。\n\n重点掌握：\n- 基本概念的定义\n- 核心原理的理解\n- 基础算法的实现`;
            content.third = `第二章内容\n\n本章节深入研究课程的核心内容。\n\n重点学习：\n- 高级概念的应用\n- 复杂问题的解决方法\n- 实际应用案例分析`;
            content.fourth = `第三章内容\n\n本章节介绍课程的前沿发展和应用。\n\n需要关注：\n- 最新研究进展\n- 实际项目实践\n- 未来发展趋势`;
            break;
    }

    return content;
};

const toCourseStudy = () => {
    // 使用当前选中的课程ID跳转
    const courseId = value.value;
    if (!courseId) {
        console.error('未选择课程');
        ElMessage.warning('请先选择一门课程');
        return;
    }
    router.push({
        name: 'CourseStudy',
        params: { courseId: courseId }
    });
}

const toAITeaching = () => {
    router.push('/student/ai-teaching')
}

const toKnowledgeGraph = () => {
    router.push({
        name: 'KnowledgeGraph'
    });
}

const toCourseSelect = () => {
    router.push('/student/course/CourseSelect')
};

//笔记、错题集
const note_data = ref([]);
const wrong_data = ref([]);

// 获取笔记数据
const fetchNotes = async (courseId, userId, username) => {
    try {
        console.log(`使用用户ID ${userId} 获取课程 ${courseId} 的笔记`);

        try {
            const response = await request.get(`/api/student/course/notes/`, {
                params: {
                    stu_id: userId,
                    username: username,
                    course_id: courseId,
                    use_sql: true,   // 使用SQL查询
                    detailed: true    // 请求详细信息
                },
                timeout: 8000 // 增加超时设置
            });

            console.log('笔记数据响应:', response);

            // 处理不同的响应格式
            let notesData = [];
            if (response?.data) {
                // 响应是数组
                if (Array.isArray(response.data)) {
                    notesData = response.data;
                }
                // 响应是对象，有data字段
                else if (response.data.data && Array.isArray(response.data.data)) {
                    notesData = response.data.data;
                }
                // 响应是对象，有items字段
                else if (response.data.items && Array.isArray(response.data.items)) {
                    notesData = response.data.items;
                }
                // 响应是对象，有notes字段
                else if (response.data.notes && Array.isArray(response.data.notes)) {
                    notesData = response.data.notes;
                }
            }

            // 检查返回数据是否为空数组或无效数据
            if (notesData.length > 0) {
                // 标准化笔记数据
                note_data.value = notesData.map(note => {
                    // 尝试获取笔记标题，提供多种可能的字段名
                    const title = note.note_title || note.title || note.name || note.content?.substring(0, 20) || '未命名笔记';
                    return { note_title: title };
                });
                console.log('成功设置笔记数据:', note_data.value);
                return;
            } else {
                throw new Error('笔记数据为空');
            }
        } catch (apiError) {
            console.error('API请求笔记失败:', apiError);
            throw apiError; // 重新抛出以便外层捕获
        }
    } catch (error) {
        console.error('获取笔记失败，使用默认数据:', error);
        note_data.value = [
            { note_title: '目的' },
            { note_title: '意义' },
            { note_title: '定义' },
            { note_title: '公式' },
            { note_title: '单纯形表' }
        ];
    }
};

// 获取错题集数据
const fetchWrongQuestions = async (courseId, userId, username) => {
    try {
        console.log(`使用用户ID ${userId} 获取课程 ${courseId} 的错题集`);

        try {
            const response = await request.get(`/api/student/course/wrong-questions/`, {
                params: {
                    stu_id: userId,
                    username: username,
                    course_id: courseId,
                    use_sql: true,    // 使用SQL查询
                    detailed: true     // 请求详细信息
                },
                timeout: 8000 // 增加超时设置
            });

            console.log('错题集数据响应:', response);

            // 处理不同的响应格式
            let wrongQuestionsData = [];
            if (response?.data) {
                // 响应是数组
                if (Array.isArray(response.data)) {
                    wrongQuestionsData = response.data;
                }
                // 响应是对象，有data字段
                else if (response.data.data && Array.isArray(response.data.data)) {
                    wrongQuestionsData = response.data.data;
                }
                // 响应是对象，有items字段
                else if (response.data.items && Array.isArray(response.data.items)) {
                    wrongQuestionsData = response.data.items;
                }
                // 响应是对象，有questions字段
                else if (response.data.questions && Array.isArray(response.data.questions)) {
                    wrongQuestionsData = response.data.questions;
                }
                // 响应是对象，有wrong_questions字段
                else if (response.data.wrong_questions && Array.isArray(response.data.wrong_questions)) {
                    wrongQuestionsData = response.data.wrong_questions;
                }
            }

            // 检查返回数据是否有效
            if (wrongQuestionsData.length > 0) {
                // 标准化错题集数据
                wrong_data.value = wrongQuestionsData.map(item => {
                    // 尝试获取错题标题，提供多种可能的字段名
                    const title = item.wrong_title || item.title || item.name || item.question ||
                                 (item.content && item.content.substring(0, 20)) || '未命名错题';
                    return { wrong_title: title };
                });
                console.log('成功设置错题集数据:', wrong_data.value);
                return;
            } else {
                throw new Error('错题集数据为空');
            }
        } catch (apiError) {
            console.error('API请求错题集失败:', apiError);
            throw apiError; // 重新抛出以便外层捕获
        }
    } catch (error) {
        console.error('获取错题失败，使用默认数据:', error);
        wrong_data.value = [
            { wrong_title: '习题1.2' },
            { wrong_title: '习题2.3' }
        ];
    }
};

const to_note = () => {
    return h(RouterLink, { to: { name: 'note' } }, () => '笔记');
};
const to_wrong = () => {
    return h(RouterLink, { to: { name: 'wrong' } }, () => '错题集');
};

//待学习
const active_tab = ref('first');
const tabs = ref([]);
const tab_content = ref({});

// 组件加载和刷新方法
const reloadData = async () => {
    console.log('正在重新加载数据...');
    ElMessage.info('正在加载课程数据...');
    try {
        // 先获取课程列表
        const success = await fetchSelectedCourses();

        // 检查是否成功选中了课程
        if (value.value) {
            console.log(`已选中课程ID: ${value.value}，开始获取课程数据`);
            await fetchCourseData(value.value);
            ElMessage.success('数据加载成功');
        } else {
            console.log('未能选中有效课程，使用默认数据');
            ElMessage.warning('未能获取到您的课程，显示默认数据');
            useDefaultData();
        }
    } catch (error) {
        console.error('加载数据失败:', error);
        ElMessage.error('数据加载失败，使用默认数据');
        useDefaultData();
    }
};

// 组件挂载时获取数据
onMounted(async () => {
    console.log('组件挂载，开始加载数据');

    try {
        // 直接加载数据，不使用setTimeout
        await reloadData();
    } catch (error) {
        console.error('初始化数据失败:', error);
        useDefaultData();
    }
});

// 课程选择变化时的处理
const handleCourseChange = () => {
    if (value.value) {
        console.log(`切换到课程ID: ${value.value}`);

        // 清空之前的数据，确保显示新数据
        tabs.value = [];
        tab_content.value = {};
        note_data.value = [];
        wrong_data.value = [];

        // 先显示加载指示
        ElMessage.info(`正在加载课程ID: ${value.value} 的数据...`);

        // 尝试获取数据，如果API失败则直接使用默认数据
        try {
        // 重新获取课程数据
        fetchCourseData(value.value);
        } catch (error) {
            console.error(`加载课程ID: ${value.value} 数据失败，使用默认数据`, error);
            // 直接使用默认数据，确保传入当前选择的课程ID
            useDefaultData(value.value);
        }
    } else {
        console.log('没有有效的课程ID，无法获取课程数据');
    }
};

// 切换聊天窗口显示/隐藏
const toggleChat = () => {
    const container = document.getElementById('chatContainer');
    if (container.style.display === 'none' || container.style.display === '') {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}

</script>

<template>
  <div class="selected-course-container">
        <el-header class="ci_up" >
        <el-row class="header-row">
            <el-col :span="5">
                <div class="course-select-wrapper">
                    <el-select
                        v-model="value"
                        placeholder="请选择课程"
                        size="large"
                        style="width: 240px"
                        @change="handleCourseChange"
                    >
                        <el-option
                            v-for="item in course_name"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="study-btn-wrapper">
                    <el-button
                        type="info"
                        plain
                        @click="toCourseStudy"
                        :icon="ArrowRight"
                        size="large"
                        class="action-button course-study-btn"
                    >
                        课程学习
                    </el-button>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="ai-teaching-wrapper">
                    <el-button
                        type="success"
                        plain
                        @click="toAITeaching"
                        :icon="ChatLineRound"
                        size="large"
                        class="action-button ai-teaching-btn"
                    >
                        开始AI教学！
                    </el-button>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="knowledge-graph-wrapper">
                    <el-button
                        type="warning"
                        plain
                        @click="toKnowledgeGraph"
                        :icon="Share"
                        size="large"
                        class="action-button knowledge-graph-btn"
                    >
                        知识图谱
                    </el-button>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="more-course-wrapper">
                <el-button
                    type="info"
                    plain
                    @click="toCourseSelect"
                    :icon="DocumentAdd"
                    size="large"
                    class="action-button more-course-btn"
                >
                    更多课程
                </el-button>
                </div>
            </el-col>
        </el-row>
    </el-header>
    <el-main class="course_main">
        <el-row>
            <el-col :span="14">
                <el-row class="lpc_up">
                    <el-col :span="8">
                        <div class="learning_progress">
                            <el-progress type="circle" :percentage="learningProgress" />
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="course_data" style="width: 30vh">
                            <br>
                            <el-descriptions :column="1" size="large" label-width="18vh">
                                <el-descriptions-item label="出勤率">{{attendanceRate}}</el-descriptions-item>
                                <el-descriptions-item label="互动率">{{interactionRate}}</el-descriptions-item>
                                <el-descriptions-item label="专注度">{{focusRate}}</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="ncw_up">
                    <el-col :span="12">
                        <div class="note">
                            <el-card class="record-card" shadow="hover">
                                <template #header>
                                    <div class="record-header">
                                        <span>笔记</span>
                                        <el-button type="primary" size="small" text @click="$router.push('/student/record/note')">查看全部</el-button>
                                    </div>
                                </template>
                                <el-scrollbar height="54vh">
                                    <el-empty v-if="note_data.length === 0" description="暂无笔记" />
                                    <div v-else class="record-list">
                                        <div v-for="(note, index) in note_data" :key="index" class="record-item">
                                            <el-icon><Document /></el-icon>
                                            <span class="record-title">{{ note.note_title }}</span>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="wrong">
                            <el-card class="record-card" shadow="hover">
                                <template #header>
                                    <div class="record-header">
                                        <span>错题集</span>
                                        <el-button type="primary" size="small" text @click="$router.push('/student/record/wrong')">查看全部</el-button>
                                    </div>
                                </template>
                                <el-scrollbar height="54vh">
                                    <el-empty v-if="wrong_data.length === 0" description="暂无错题" />
                                    <div v-else class="record-list">
                                        <div v-for="(wrong, index) in wrong_data" :key="index" class="record-item">
                                            <el-icon><Warning /></el-icon>
                                            <span class="record-title">{{ wrong.wrong_title }}</span>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="10">
                <el-tabs v-model="active_tab" type="border-card" tab-position="left" style="height: 84vh; width: 60vh" @tab-click="handleTabClick">
                    <el-tab-pane
                        v-for="tab in tabs"
                        :key="tab.name"
                        :label="tab.label"
                        :name="tab.name"
                    >
                        <div v-if="tab_content[tab.name]">
                            {{tab_content[tab.name]}}
                        </div>
                        <div v-else>
                            <el-skeleton :rows="10" animated />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </el-main>
  </div>
<!--  <div class="chat-bubble" @click="toggleChat">-->
<!--        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E" alt="聊天">-->
<!--    </div>-->

<!--    <div class="chat-container" id="chatContainer">-->
<!--        <iframe src="http://121.40.242.43/chatbot/c7ZSvPxvxyO1fuIo" class="chat-iframe"></iframe>-->
<!--  </div>-->
</template>

<style scoped>
.ci_up{
    width: 100vh;
    height:10vh;
    padding: 20px;
}
.course_main{
    height:90vh;
}
.learning_progress{
    padding: 20px;
}
.lpc_up{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px black;
    height: 30vh;
    width: 100vh;
}
.record-card {
    margin-bottom: 16px;
    height: 100%;
}
.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.record-list {
    padding: 0;
}
.record-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s;
}
.record-item:hover {
    background-color: #f5f7fa;
}
.record-title {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-row {
    display: flex;
    align-items: center;
}

.course-select-wrapper {
    display: flex;
    align-items: center;
}

.study-btn-wrapper {
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.ai-teaching-wrapper {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.knowledge-graph-wrapper {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.more-course-wrapper {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.action-button {
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.chat-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #007bff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.chat-bubble img {
    width: 30px;
    height: 30px;
}

.chat-container {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: none;
    z-index: 999;
}

.chat-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}
</style>

